<template>
  <div class="svg-demo">
    <h2 class="section-title">SVG 矢量图详解</h2>
    <p class="section-intro">
      SVG (Scalable Vector Graphics)
      是基于XML的矢量图形格式，具有可缩放、文件小、可编程等优势，是现代Web开发的重要技术。
    </p>

    <div class="demo-grid">
      <!-- SVG 基础语法 -->
      <div class="demo-card">
        <h3>SVG 基础语法</h3>
        <div class="code-example">
          <div class="code-block">
            <pre><code>&lt;!-- SVG 容器 --&gt;
&lt;svg width="200" height="200" viewBox="0 0 200 200"&gt;
  &lt;!-- 矩形 --&gt;
  &lt;rect x="10" y="10" width="50" height="50" fill="blue" /&gt;
  
  &lt;!-- 圆形 --&gt;
  &lt;circle cx="100" cy="50" r="25" fill="red" /&gt;
  
  &lt;!-- 椭圆 --&gt;
  &lt;ellipse cx="150" cy="50" rx="30" ry="20" fill="green" /&gt;
  
  &lt;!-- 线条 --&gt;
  &lt;line x1="10" y1="100" x2="190" y2="100" stroke="black" stroke-width="2" /&gt;
  
  &lt;!-- 文本 --&gt;
  &lt;text x="100" y="130" text-anchor="middle" fill="purple"&gt;SVG Text&lt;/text&gt;
&lt;/svg&gt;</code></pre>
          </div>
          <div class="demo-result">
            <div class="svg-basic-demo">
              <svg width="200" height="200" viewBox="0 0 200 200">
                <rect x="10" y="10" width="50" height="50" fill="blue" />
                <circle cx="100" cy="50" r="25" fill="red" />
                <ellipse cx="150" cy="50" rx="30" ry="20" fill="green" />
                <line x1="10" y1="100" x2="190" y2="100" stroke="black" stroke-width="2" />
                <text x="100" y="130" text-anchor="middle" fill="purple">SVG Text</text>
              </svg>
            </div>
          </div>
        </div>
      </div>

      <!-- 路径 (Path) -->
      <div class="demo-card">
        <h3>路径 (Path) 详解</h3>
        <div class="code-example">
          <div class="code-block">
            <pre><code>&lt;!-- Path 命令 --&gt;
&lt;svg width="300" height="200" viewBox="0 0 300 200"&gt;
  &lt;!-- M = moveto, L = lineto, C = curveto, Z = closepath --&gt;
  &lt;path d="M 50 50 L 150 50 L 100 150 Z" fill="lightblue" stroke="blue" stroke-width="2" /&gt;
  
  &lt;!-- 贝塞尔曲线 --&gt;
  &lt;path d="M 200 50 Q 250 20 300 50 T 350 100" fill="none" stroke="red" stroke-width="3" /&gt;
  
  &lt;!-- 弧线 --&gt;
  &lt;path d="M 50 150 A 50 30 0 0 1 150 150" fill="none" stroke="green" stroke-width="3" /&gt;
&lt;/svg&gt;

&lt;!-- Path 命令说明 --&gt;
&lt;!-- M/m: 移动到 (Move to) --&gt;
&lt;!-- L/l: 直线到 (Line to) --&gt;
&lt;!-- H/h: 水平线到 (Horizontal line to) --&gt;
&lt;!-- V/v: 垂直线到 (Vertical line to) --&gt;
&lt;!-- C/c: 三次贝塞尔曲线 (Cubic Bezier curve) --&gt;
&lt;!-- Q/q: 二次贝塞尔曲线 (Quadratic Bezier curve) --&gt;
&lt;!-- A/a: 弧线 (Arc) --&gt;
&lt;!-- Z/z: 闭合路径 (Close path) --&gt;</code></pre>
          </div>
          <div class="demo-result">
            <div class="svg-path-demo">
              <svg width="300" height="200" viewBox="0 0 300 200">
                <path
                  d="M 50 50 L 150 50 L 100 150 Z"
                  fill="lightblue"
                  stroke="blue"
                  stroke-width="2"
                />
                <path d="M 200 50 Q 250 20 300 50" fill="none" stroke="red" stroke-width="3" />
                <path
                  d="M 50 150 A 50 30 0 0 1 150 150"
                  fill="none"
                  stroke="green"
                  stroke-width="3"
                />
              </svg>
              <div class="path-interactive">
                <h4>交互式路径编辑器</h4>
                <div class="path-controls">
                  <label>
                    路径数据:
                    <input v-model="pathData" type="text" class="path-input" />
                  </label>
                  <div class="path-presets">
                    <button @click="pathData = 'M 50 50 L 150 50 L 100 150 Z'">三角形</button>
                    <button @click="pathData = 'M 50 100 Q 100 50 150 100 T 250 100'">
                      波浪线
                    </button>
                    <button @click="pathData = 'M 50 50 C 50 50 100 20 150 50 S 200 80 250 50'">
                      S曲线
                    </button>
                  </div>
                </div>
                <svg width="300" height="150" viewBox="0 0 300 150" class="interactive-svg">
                  <path :d="pathData" fill="none" stroke="#e91e63" stroke-width="3" />
                </svg>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- SVG 样式和动画 -->
      <div class="demo-card">
        <h3>SVG 样式和动画</h3>
        <div class="code-example">
          <div class="code-block">
            <pre><code>&lt;!-- CSS 样式化 SVG --&gt;
&lt;style&gt;
.animated-circle {
  fill: #e91e63;
  transition: all 0.3s ease;
}

.animated-circle:hover {
  fill: #4caf50;
  transform: scale(1.2);
  transform-origin: center;
}

.rotating-rect {
  animation: rotate 2s linear infinite;
  transform-origin: center;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
&lt;/style&gt;

&lt;!-- SVG 内置动画 --&gt;
&lt;svg width="200" height="200"&gt;
  &lt;circle cx="100" cy="100" r="30"&gt;
    &lt;animate attributeName="r" values="30;50;30" dur="2s" repeatCount="indefinite" /&gt;
    &lt;animateColor attributeName="fill" values="red;blue;red" dur="2s" repeatCount="indefinite" /&gt;
  &lt;/circle&gt;
&lt;/svg&gt;</code></pre>
          </div>
          <div class="demo-result">
            <div class="svg-animation-demo">
              <div class="animation-example">
                <h4>CSS 动画</h4>
                <svg width="150" height="150" viewBox="0 0 150 150">
                  <circle cx="75" cy="75" r="30" class="animated-circle" />
                  <rect x="25" y="25" width="20" height="20" fill="#ff9800" class="rotating-rect" />
                </svg>
              </div>
              <div class="animation-example">
                <h4>SVG 内置动画</h4>
                <svg width="150" height="150" viewBox="0 0 150 150">
                  <circle cx="75" cy="75" r="30" fill="#2196f3">
                    <animate
                      attributeName="r"
                      values="20;40;20"
                      dur="2s"
                      repeatCount="indefinite"
                    />
                  </circle>
                  <rect x="60" y="60" width="30" height="30" fill="#4caf50">
                    <animateTransform
                      attributeName="transform"
                      type="rotate"
                      values="0 75 75;360 75 75"
                      dur="3s"
                      repeatCount="indefinite"
                    />
                  </rect>
                </svg>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 渐变和滤镜 -->
      <div class="demo-card">
        <h3>渐变和滤镜效果</h3>
        <div class="code-example">
          <div class="code-block">
            <pre><code>&lt;svg width="300" height="200"&gt;
  &lt;defs&gt;
    &lt;!-- 线性渐变 --&gt;
    &lt;linearGradient id="linearGrad" x1="0%" y1="0%" x2="100%" y2="0%"&gt;
      &lt;stop offset="0%" style="stop-color:#ff9800;stop-opacity:1" /&gt;
      &lt;stop offset="100%" style="stop-color:#e91e63;stop-opacity:1" /&gt;
    &lt;/linearGradient&gt;
    
    &lt;!-- 径向渐变 --&gt;
    &lt;radialGradient id="radialGrad" cx="50%" cy="50%" r="50%"&gt;
      &lt;stop offset="0%" style="stop-color:#4caf50;stop-opacity:1" /&gt;
      &lt;stop offset="100%" style="stop-color:#2196f3;stop-opacity:1" /&gt;
    &lt;/radialGradient&gt;
    
    &lt;!-- 阴影滤镜 --&gt;
    &lt;filter id="dropshadow" x="-20%" y="-20%" width="140%" height="140%"&gt;
      &lt;feDropShadow dx="3" dy="3" stdDeviation="3" flood-color="#000" flood-opacity="0.3"/&gt;
    &lt;/filter&gt;
    
    &lt;!-- 模糊滤镜 --&gt;
    &lt;filter id="blur"&gt;
      &lt;feGaussianBlur stdDeviation="2" /&gt;
    &lt;/filter&gt;
  &lt;/defs&gt;
  
  &lt;rect x="20" y="20" width="80" height="60" fill="url(#linearGrad)" /&gt;
  &lt;circle cx="180" cy="50" r="30" fill="url(#radialGrad)" /&gt;
  &lt;rect x="20" y="120" width="80" height="60" fill="#673ab7" filter="url(#dropshadow)" /&gt;
  &lt;circle cx="180" cy="150" r="30" fill="#ff5722" filter="url(#blur)" /&gt;
&lt;/svg&gt;</code></pre>
          </div>
          <div class="demo-result">
            <div class="svg-effects-demo">
              <svg width="300" height="200" viewBox="0 0 300 200">
                <defs>
                  <linearGradient id="linearGrad" x1="0%" y1="0%" x2="100%" y2="0%">
                    <stop offset="0%" style="stop-color: #ff9800; stop-opacity: 1" />
                    <stop offset="100%" style="stop-color: #e91e63; stop-opacity: 1" />
                  </linearGradient>

                  <radialGradient id="radialGrad" cx="50%" cy="50%" r="50%">
                    <stop offset="0%" style="stop-color: #4caf50; stop-opacity: 1" />
                    <stop offset="100%" style="stop-color: #2196f3; stop-opacity: 1" />
                  </radialGradient>

                  <filter id="dropshadow" x="-20%" y="-20%" width="140%" height="140%">
                    <feDropShadow
                      dx="3"
                      dy="3"
                      stdDeviation="3"
                      flood-color="#000"
                      flood-opacity="0.3"
                    />
                  </filter>

                  <filter id="blur">
                    <feGaussianBlur stdDeviation="2" />
                  </filter>
                </defs>

                <rect x="20" y="20" width="80" height="60" fill="url(#linearGrad)" />
                <circle cx="180" cy="50" r="30" fill="url(#radialGrad)" />
                <rect
                  x="20"
                  y="120"
                  width="80"
                  height="60"
                  fill="#673ab7"
                  filter="url(#dropshadow)"
                />
                <circle cx="180" cy="150" r="30" fill="#ff5722" filter="url(#blur)" />
              </svg>
              <div class="effects-labels">
                <div class="label-item">线性渐变</div>
                <div class="label-item">径向渐变</div>
                <div class="label-item">阴影效果</div>
                <div class="label-item">模糊效果</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 图标系统 -->
      <div class="demo-card">
        <h3>SVG 图标系统</h3>
        <div class="code-example">
          <div class="code-block">
            <pre><code>&lt;!-- 定义图标库 --&gt;
&lt;svg style="display: none;"&gt;
  &lt;defs&gt;
    &lt;symbol id="icon-heart" viewBox="0 0 24 24"&gt;
      &lt;path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/&gt;
    &lt;/symbol&gt;
    
    &lt;symbol id="icon-star" viewBox="0 0 24 24"&gt;
      &lt;path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/&gt;
    &lt;/symbol&gt;
  &lt;/defs&gt;
&lt;/svg&gt;

&lt;!-- 使用图标 --&gt;
&lt;svg width="24" height="24" class="icon"&gt;
  &lt;use href="#icon-heart" /&gt;
&lt;/svg&gt;

&lt;svg width="32" height="32" class="icon large"&gt;
  &lt;use href="#icon-star" /&gt;
&lt;/svg&gt;</code></pre>
          </div>
          <div class="demo-result">
            <div class="svg-icons-demo">
              <!-- 图标定义 -->
              <svg style="display: none">
                <defs>
                  <symbol id="icon-heart" viewBox="0 0 24 24">
                    <path
                      d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"
                    />
                  </symbol>

                  <symbol id="icon-star" viewBox="0 0 24 24">
                    <path
                      d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
                    />
                  </symbol>

                  <symbol id="icon-settings" viewBox="0 0 24 24">
                    <path
                      d="M12 15.5A3.5 3.5 0 0 1 8.5 12A3.5 3.5 0 0 1 12 8.5a3.5 3.5 0 0 1 3.5 3.5 3.5 3.5 0 0 1-3.5 3.5m7.43-2.53c.04-.32.07-.64.07-.97 0-.33-.03-.66-.07-1l2.11-1.63c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.31-.61-.22l-2.49 1c-.52-.39-1.06-.73-1.69-.98l-.37-2.65A.506.506 0 0 0 14 2h-4c-.25 0-.46.18-.5.42l-.37 2.65c-.63.25-1.17.59-1.69.98l-2.49-1c-.22-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64L4.57 11c-.04.34-.07.67-.07 1 0 .33.03.65.07.97l-2.11 1.66c-.19.15-.25.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1.01c.52.4 1.06.74 1.69.99l.37 2.65c.04.24.25.42.5.42h4c.25 0 .46-.18.5-.42l.37-2.65c.63-.26 1.17-.59 1.69-.99l2.49 1.01c.22.08.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.66Z"
                    />
                  </symbol>

                  <symbol id="icon-download" viewBox="0 0 24 24">
                    <path d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z" />
                  </symbol>
                </defs>
              </svg>

              <div class="icon-showcase">
                <div class="icon-item">
                  <svg width="24" height="24" class="icon heart">
                    <use href="#icon-heart" />
                  </svg>
                  <span>Heart (24px)</span>
                </div>

                <div class="icon-item">
                  <svg width="32" height="32" class="icon star">
                    <use href="#icon-star" />
                  </svg>
                  <span>Star (32px)</span>
                </div>

                <div class="icon-item">
                  <svg width="28" height="28" class="icon settings">
                    <use href="#icon-settings" />
                  </svg>
                  <span>Settings (28px)</span>
                </div>

                <div class="icon-item">
                  <svg width="36" height="36" class="icon download">
                    <use href="#icon-download" />
                  </svg>
                  <span>Download (36px)</span>
                </div>
              </div>

              <div class="icon-colors">
                <h4>图标颜色变化</h4>
                <div class="color-variants">
                  <svg width="24" height="24" class="icon" style="fill: #f44336">
                    <use href="#icon-heart" />
                  </svg>
                  <svg width="24" height="24" class="icon" style="fill: #4caf50">
                    <use href="#icon-heart" />
                  </svg>
                  <svg width="24" height="24" class="icon" style="fill: #2196f3">
                    <use href="#icon-heart" />
                  </svg>
                  <svg width="24" height="24" class="icon" style="fill: #ff9800">
                    <use href="#icon-heart" />
                  </svg>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 响应式 SVG -->
      <div class="demo-card">
        <h3>响应式 SVG</h3>
        <div class="code-example">
          <div class="code-block">
            <pre><code>&lt;!-- 响应式 SVG 容器 --&gt;
.responsive-svg {
  width: 100%;
  height: auto;
  max-width: 400px;
}

&lt;!-- 保持宽高比 --&gt;
.svg-container {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9 宽高比 */
}

.svg-container svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

&lt;!-- 使用 viewBox 实现缩放 --&gt;
&lt;svg viewBox="0 0 400 300" class="responsive-svg"&gt;
  &lt;!-- 内容会自动缩放 --&gt;
&lt;/svg&gt;</code></pre>
          </div>
          <div class="demo-result">
            <div class="responsive-svg-demo">
              <h4>响应式 SVG 图表</h4>
              <div class="svg-container">
                <svg viewBox="0 0 400 300" class="responsive-chart">
                  <!-- 背景网格 -->
                  <defs>
                    <pattern id="grid" width="40" height="30" patternUnits="userSpaceOnUse">
                      <path d="M 40 0 L 0 0 0 30" fill="none" stroke="#e0e0e0" stroke-width="1" />
                    </pattern>
                  </defs>
                  <rect width="400" height="300" fill="url(#grid)" />

                  <!-- 数据可视化 -->
                  <g class="chart-data">
                    <rect x="50" y="200" width="30" height="80" fill="#2196f3" />
                    <rect x="100" y="150" width="30" height="130" fill="#4caf50" />
                    <rect x="150" y="100" width="30" height="180" fill="#ff9800" />
                    <rect x="200" y="120" width="30" height="160" fill="#e91e63" />
                    <rect x="250" y="180" width="30" height="100" fill="#9c27b0" />
                    <rect x="300" y="160" width="30" height="120" fill="#f44336" />
                  </g>

                  <!-- 标签 -->
                  <g class="chart-labels">
                    <text x="65" y="295" text-anchor="middle" font-size="12" fill="#666">Jan</text>
                    <text x="115" y="295" text-anchor="middle" font-size="12" fill="#666">Feb</text>
                    <text x="165" y="295" text-anchor="middle" font-size="12" fill="#666">Mar</text>
                    <text x="215" y="295" text-anchor="middle" font-size="12" fill="#666">Apr</text>
                    <text x="265" y="295" text-anchor="middle" font-size="12" fill="#666">May</text>
                    <text x="315" y="295" text-anchor="middle" font-size="12" fill="#666">Jun</text>
                  </g>
                </svg>
              </div>
              <p class="resize-hint">调整浏览器窗口大小查看响应式效果</p>
            </div>
          </div>
        </div>
      </div>

      <!-- SVG 优化 -->
      <div class="demo-card">
        <h3>SVG 优化技巧</h3>
        <div class="code-example">
          <div class="code-block">
            <pre><code>&lt;!-- 优化前 --&gt;
&lt;svg width="100.000000" height="100.000000" viewBox="0.000000 0.000000 100.000000 100.000000"&gt;
  &lt;g id="layer1" transform="translate(0.000000,0.000000)"&gt;
    &lt;rect x="10.500000" y="10.500000" width="79.000000" height="79.000000" 
          style="fill:#ff0000;stroke:#000000;stroke-width:1.000000" /&gt;
  &lt;/g&gt;
&lt;/svg&gt;

&lt;!-- 优化后 --&gt;
&lt;svg width="100" height="100" viewBox="0 0 100 100"&gt;
  &lt;rect x="10.5" y="10.5" width="79" height="79" fill="#f00" stroke="#000" /&gt;
&lt;/svg&gt;

&lt;!-- 优化技巧 --&gt;
&lt;!-- 1. 移除不必要的元数据和注释 --&gt;
&lt;!-- 2. 简化数值精度 --&gt;
&lt;!-- 3. 合并相似的路径 --&gt;
&lt;!-- 4. 使用简短的颜色值 --&gt;
&lt;!-- 5. 移除默认属性 --&gt;
&lt;!-- 6. 使用 SVGO 工具自动优化 --&gt;</code></pre>
          </div>
          <div class="demo-result">
            <div class="svg-optimization-demo">
              <div class="optimization-comparison">
                <div class="comparison-item">
                  <h4>优化前 (冗余代码)</h4>
                  <div class="code-size">文件大小: ~2.5KB</div>
                  <svg width="80" height="80" viewBox="0 0 100 100">
                    <g transform="translate(0,0)">
                      <rect
                        x="10.500000"
                        y="10.500000"
                        width="79.000000"
                        height="79.000000"
                        style="fill: #ff0000; stroke: #000000; stroke-width: 1"
                      />
                    </g>
                  </svg>
                </div>

                <div class="comparison-item">
                  <h4>优化后 (精简代码)</h4>
                  <div class="code-size">文件大小: ~0.8KB</div>
                  <svg width="80" height="80" viewBox="0 0 100 100">
                    <rect x="10.5" y="10.5" width="79" height="79" fill="#f00" stroke="#000" />
                  </svg>
                </div>
              </div>

              <div class="optimization-tools">
                <h4>推荐优化工具</h4>
                <ul>
                  <li><strong>SVGO:</strong> 命令行SVG优化工具</li>
                  <li><strong>SVGOMG:</strong> 在线SVG优化器</li>
                  <li><strong>Illustrator:</strong> 导出时选择优化选项</li>
                  <li><strong>Sketch:</strong> 使用SVG导出插件</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="svg-tips">
      <h3>SVG 最佳实践</h3>
      <div class="tips-grid">
        <div class="tip-card">
          <h4>🎯 选择合适的场景</h4>
          <ul>
            <li>图标和简单图形使用 SVG</li>
            <li>复杂照片使用位图格式</li>
            <li>数据可视化优选 SVG</li>
          </ul>
        </div>
        <div class="tip-card">
          <h4>📐 优化文件大小</h4>
          <ul>
            <li>使用 SVGO 等工具压缩</li>
            <li>移除不必要的元数据</li>
            <li>简化路径和数值精度</li>
          </ul>
        </div>
        <div class="tip-card">
          <h4>♿ 可访问性</h4>
          <ul>
            <li>添加 title 和 desc 元素</li>
            <li>使用语义化的 id 和 class</li>
            <li>提供替代文本</li>
          </ul>
        </div>
        <div class="tip-card">
          <h4>⚡ 性能优化</h4>
          <ul>
            <li>内联小图标，外链大图形</li>
            <li>使用 symbol 复用图标</li>
            <li>避免过度复杂的滤镜</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const pathData = ref('M 50 50 L 150 50 L 100 150 Z')
</script>

<style scoped lang="scss">
.svg-demo {
  .section-title {
    font-size: 2rem;
    color: #333;
    margin-bottom: 1rem;
    border-bottom: 3px solid #ff5722;
    padding-bottom: 0.5rem;
  }

  .section-intro {
    font-size: 1.1rem;
    color: #666;
    margin-bottom: 2rem;
    line-height: 1.6;
  }

  .demo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
  }

  .demo-card {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 1.5rem;
    background: #fafafa;

    h3 {
      margin: 0 0 1rem 0;
      color: #ff5722;
      font-size: 1.3rem;
    }

    .code-example {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    .code-block {
      background: #2d3748;
      border-radius: 6px;
      padding: 1rem;
      overflow-x: auto;

      pre {
        margin: 0;
        color: #e2e8f0;
        font-family: 'Fira Code', monospace;
        font-size: 0.9rem;
        line-height: 1.4;
      }
    }

    .demo-result {
      background: white;
      border: 1px solid #e0e0e0;
      border-radius: 6px;
      padding: 1rem;
      min-height: 100px;
    }
  }

  .svg-tips {
    .tips-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 1rem;
    }

    .tip-card {
      background: #fff3e0;
      border-radius: 8px;
      padding: 1.5rem;
      border-left: 4px solid #ff5722;

      h4 {
        margin: 0 0 0.5rem 0;
        color: #d84315;
        font-size: 1.1rem;
      }

      ul {
        margin: 0;
        padding-left: 1.5rem;

        li {
          margin-bottom: 0.25rem;
          color: #666;
          font-size: 0.9rem;
        }
      }
    }
  }
}

// SVG 基础演示
.svg-basic-demo {
  display: flex;
  justify-content: center;
  padding: 1rem;
  background: #f9f9f9;
  border-radius: 6px;
}

// 路径演示
.svg-path-demo {
  .path-interactive {
    margin-top: 2rem;
    padding: 1rem;
    background: #f5f5f5;
    border-radius: 6px;

    h4 {
      margin: 0 0 1rem 0;
      color: #333;
    }

    .path-controls {
      margin-bottom: 1rem;

      label {
        display: block;
        margin-bottom: 0.5rem;
        font-weight: 500;
      }

      .path-input {
        width: 100%;
        padding: 8px;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-family: monospace;
        font-size: 0.9rem;
      }

      .path-presets {
        display: flex;
        gap: 0.5rem;
        margin-top: 0.5rem;

        button {
          padding: 6px 12px;
          border: 1px solid #ddd;
          background: white;
          border-radius: 4px;
          cursor: pointer;
          font-size: 0.8rem;

          &:hover {
            background: #f0f0f0;
          }
        }
      }
    }

    .interactive-svg {
      border: 1px solid #ddd;
      border-radius: 4px;
      background: white;
    }
  }
}

// 动画演示
.svg-animation-demo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;

  .animation-example {
    text-align: center;

    h4 {
      margin: 0 0 1rem 0;
      color: #333;
      font-size: 1rem;
    }

    svg {
      border: 1px solid #e0e0e0;
      border-radius: 6px;
      background: #f9f9f9;
    }
  }
}

.animated-circle {
  fill: #e91e63;
  transition: all 0.3s ease;
  cursor: pointer;

  &:hover {
    fill: #4caf50;
    transform: scale(1.2);
    transform-origin: center;
  }
}

.rotating-rect {
  animation: rotate 2s linear infinite;
  transform-origin: center;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

// 效果演示
.svg-effects-demo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;

  svg {
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: white;
  }

  .effects-labels {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    width: 100%;
    max-width: 300px;

    .label-item {
      text-align: center;
      font-size: 0.9rem;
      color: #666;
      padding: 0.5rem;
      background: #f5f5f5;
      border-radius: 4px;
    }
  }
}

// 图标演示
.svg-icons-demo {
  .icon-showcase {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;

    .icon-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.5rem;
      padding: 1rem;
      background: #f9f9f9;
      border-radius: 6px;
      border: 1px solid #e0e0e0;

      .icon {
        transition: all 0.3s ease;
        cursor: pointer;

        &:hover {
          transform: scale(1.1);
        }

        &.heart {
          fill: #e91e63;
        }

        &.star {
          fill: #ff9800;
        }

        &.settings {
          fill: #2196f3;
        }

        &.download {
          fill: #4caf50;
        }
      }

      span {
        font-size: 0.8rem;
        color: #666;
        text-align: center;
      }
    }
  }

  .icon-colors {
    h4 {
      margin: 0 0 1rem 0;
      color: #333;
      font-size: 1rem;
    }

    .color-variants {
      display: flex;
      gap: 1rem;
      justify-content: center;

      .icon {
        transition: transform 0.2s ease;
        cursor: pointer;

        &:hover {
          transform: scale(1.2);
        }
      }
    }
  }
}

// 响应式演示
.responsive-svg-demo {
  h4 {
    margin: 0 0 1rem 0;
    color: #333;
    text-align: center;
  }

  .svg-container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 75%; /* 4:3 宽高比 */
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    overflow: hidden;
    background: white;
  }

  .responsive-chart {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .resize-hint {
    text-align: center;
    font-size: 0.9rem;
    color: #666;
    font-style: italic;
    margin-top: 1rem;
  }
}

// 优化演示
.svg-optimization-demo {
  .optimization-comparison {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;

    .comparison-item {
      text-align: center;
      padding: 1rem;
      background: #f9f9f9;
      border-radius: 6px;
      border: 1px solid #e0e0e0;

      h4 {
        margin: 0 0 0.5rem 0;
        color: #333;
        font-size: 1rem;
      }

      .code-size {
        font-size: 0.8rem;
        color: #666;
        margin-bottom: 1rem;
      }

      svg {
        border: 1px solid #ddd;
        border-radius: 4px;
        background: white;
      }
    }
  }

  .optimization-tools {
    background: #f0f8ff;
    border-radius: 6px;
    padding: 1rem;
    border-left: 4px solid #2196f3;

    h4 {
      margin: 0 0 0.5rem 0;
      color: #1976d2;
    }

    ul {
      margin: 0;
      padding-left: 1.5rem;

      li {
        margin-bottom: 0.5rem;
        color: #666;
        line-height: 1.4;

        strong {
          color: #1976d2;
        }
      }
    }
  }
}
</style>
